<template>
 <div class="manageconsolepanel">
  	<el-row>
  		<el-col :span="6">
  			<div class="navList">
  			 <div :class="{'navListItem':true,'navListItemActive':!activeManagePanelName||activeManagePanelName=='manageconsole'||activeManagePanelName=='manageconsole_filemanage'}">  				
  			 	<router-link :to="{name:'manageconsole_filemanage'}">
  					<span class="navListItemText">文件管理</span>
  				</router-link>
  			 </div>	
  			 <div :class="{'navListItem':true,'navListItemActive':activeManagePanelName=='manageconsole_projectmanage'}">  				
  			 	<router-link :to="{name:'manageconsole_projectmanage'}">
  					<span class="navListItemText">项目管理</span>
  				</router-link>
  			 </div>	
  			 <div :class="{'navListItem':true,'navListItemActive':activeManagePanelName=='manageconsole_accountmanage'}">  				
  			 	<router-link :to="{name:'manageconsole_accountmanage'}">
  					<span class="navListItemText">账号管理</span>
  				</router-link>
  			 </div>	
  			 <div :class="{'navListItem':true,'navListItemActive':activeManagePanelName=='manageconsole_worksmanage'}">  				
  			 	<router-link :to="{name:'manageconsole_worksmanage'}">
  					<span class="navListItemText">作品管理</span>
  				</router-link>
  			 </div>	
  			 <div :class="{'navListItem':true,'navListItemActive':activeManagePanelName=='manageconsole_reviewmanage'}">  				
  			 	<router-link :to="{name:'manageconsole_reviewmanage'}">
  					<span class="navListItemText">评审管理</span>
  				</router-link>
  			 </div>	
  			 <div :class="{'navListItem':true,'navListItemActive':activeManagePanelName=='manageconsole_certificatemanage'}">  				
  			 	<router-link :to="{name:'manageconsole_certificatemanage'}">
  					<span class="navListItemText">证书管理</span>
  				</router-link>
  			 </div>	
  			</div>
  		</el-col>
  		<el-col :span="18">
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>
  		</el-col>
  	</el-row>
 </div>
</template>

<script>
  export default {
  	mounted(){
  		if(this.activeManagePanelName=='manageconsole')
  		 this.$router.replace({name:"manageconsole_filemanage"})
  	},
	data(){
		return {
		};
	},
	computed:{
		activeManagePanelName(){
			return this.$route.name;
		}
	},
	methods:{
	}
  }
</script>


<style>
	.navList{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.navListItem{
		font-size: 12pt;
		font-weight: bold;
		margin:10px auto;
	}
	.navListItemActive{
		font-size: 12pt;
		font-weight: bold;
		margin:10px auto;
		background: lightseagreen;
	}
	.navListItemText{
		color:black;
	}
</style>